import React, {Component} from 'react';
import pc from './Browser';

require('../css/frame.css');

const subx=40,suby=110;
export default class Info extends Component {
  constructor(...args) {
    super(...args);
    this.state = {
      show: false,
      pos: {left: '0px', top: '300px'},
      str: '',
    }
  }

  onOver(e) {
    if (!pc()){
      return;
    }
    const {style, data} = this.props;
    let ix = parseInt(style.left)-subx;
    let iy = parseInt(style.top)-suby;

    this.setState(
      {show: true,},
      () => {
        let tip = document.querySelector("#tipInfo");
        document.querySelector("#tipcont").innerHTML = data;
        let h = tip.offsetHeight;
        let w = tip.offsetWidth;
        tip.style.left = ix  - 40 + 'px';
        tip.style.top = iy - h - 30 + 'px';
      });
  }

  onOut() {
    if (!pc()){
      return;
    }
    this.setState({
      show: false,
    })
  }

  onClick() {
    if (!pc()) {
      let {show} = this.state;
      if (!show) {
        const {style, data} = this.props;
        let ix = parseInt(style.left)-subx;
        let iy = parseInt(style.top)-suby;

        this.setState(
          {show: true,},
          () => {
            let tip = document.querySelector("#tipInfo");
            document.querySelector("#tipcont").innerHTML = data;
            let h = tip.offsetHeight;
            let w = tip.offsetWidth;
            tip.style.left = ix  - 40 + 'px';
            tip.style.top = iy - h - 30 + 'px';
          });
      }else{
        this.setState(
          {show: false}
        )
      }
    }else{
      return false;
    }
  }


  render() {
    const {style, data} = this.props;
    const {show, pos, str} = this.state;
    return (
      <div>
        <img
          src={require("../img/info.png")}
          className="circle"
          style={{left:style.left-subx,top:style.top-suby}}
          onClick={this.onClick.bind(this)}
          onMouseOver={this.onOver.bind(this)}
          onMouseOut={this.onOut.bind(this)}
        />
        {show &&
        (<div className="tips" style={pos} id="tipInfo">
          <span id="bot"></span>
          <div id="tipcont" >{data}</div>
        </div>)
        }
      </div>

    );
  }

}


